import { View, Text,StyleSheet,Image,TouchableOpacity,TextInput,Pressable } from 'react-native'
import React,{useState} from 'react'
import api from '../config'

let ss=StyleSheet.create({
    container:{
        paddingHorizontal:45,
        paddingVertical:150,
    },
    ff:{
        marginTop:30,
        paddingHorizontal:20,
        borderTopColor:'#F2F2F2',
        borderTopWidth:2,
        borderRightColor:'#F2F2F2',
        borderRightWidth:2,
        borderLeftColor:'#F2F2F2',
        borderLeftWidth:2,
        backgroundColor:'#fff'
    },
    inputGroup:{
        flexDirection:'row',
        alignItems:'center',    // 交叉轴上对齐
        borderBottomColor:'#F2F2F2',
        borderBottomWidth:1,
    },
    input:{
        flex:1,
        fontSize:16,
    },
    icon:{
        marginRight:6,
        width:15,
        height:15,
        backgroundColor:'#fff'
    },
    btn:{
        marginTop:-1,
        backgroundColor:'#FFB200',
        paddingVertical:10,
        textAlign:'center',
        fontSize:16,
    },
    f4:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        paddingHorizontal:10,
        marginTop:50,
    },
    title:{
        fontSize:30,
        color:'#aaa'
    },
    text:{
        textAlign:'center',
        marginTop:50,
    }
})

export default function AdminLogin({navigation}) {
    // 状态数据 —— 当前是否为“密码输入框"
    let [isPassword,setIsPassword]=useState(true)
    // 状态数据 —— 管理员名
    let [aname,setAname]=useState('admin')
    // 状态数据 —— 密码
    let [apwd,setApwd]=useState('123456')
    function doLogin(){
        // console.log(aname,apwd)
        let url=api.adminLogin
        // 请求参数 aname=admin&apwd=123456
        fetch(url)
        .then(res=>{
            res.json().then(data=>{
                console.log('请求主体为：',data)
            })
        })
        .catch(err=>{
            console.log('请求失败',err)
        })
    }
    return (
        <View style={ss.container}>
            {/* F0:登录 */}
            <Text style={{color:'#FFB200',fontSize:30}}>登录</Text>
            <View style={ss.ff}>
            {/* F1:用户名输入框组 */}
            <View style={ss.inputGroup}>
                <Image style={ss.icon} source={require('../assets/img/user.png')}/>
                <TextInput value={aname} onChangeText={(v)=>setAname(v)} style={ss.input} placeholder='请输入管理员用户名'/>
            </View>

            {/* F2:密码输入框组 */}
            <View style={ss.inputGroup}>
                <Pressable onPress={()=>setIsPassword(!isPassword)}>
                    {
                        isPassword
                        ?(<Image style={ss.icon} source={require('../assets/img/eye-close.png')}/>)
                        :(<Image style={ss.icon} source={require('../assets/img/eye-open.png')}/>)
                    }
                    
                </Pressable>
                <TextInput  value={apwd} onChangeText={(v)=>setApwd(v)}  style={ss.input} secureTextEntry={isPassword} placeholder='请输入用户登录密码'/>
            </View>

            {/* F2.1:验证码框组 */}
            <View style={ss.inputGroup}>
                <Image style={ss.icon} source={require('../assets/img/yanzheng.png')}/>
                <TextInput style={ss.input} placeholder='图形验证码'/>
            </View>
            </View>

            {/* F3:提交按钮 */}
            <TouchableOpacity activeOpacity={0.6} onPress={doLogin}>
                <Text style={ss.btn}>提交</Text>
            </TouchableOpacity>
            
            {/* F5:去注册 */}
            <Text style={ss.text} onPress={()=>navigation.navigate('pdetails')}>还没有账号去注册</Text>
        </View>
    )
}